<!DOCTYPE html>
<html lang="en" theme="dark">

<head>
    <header></header>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>YtDownloader</title>
    <link rel="stylesheet" href="../assets/css/index.css">
    <script src="../src/renderer.js" defer></script>
    <script src="../src/index.js" defer></script>
    <script src="../src/common.js" defer></script>
    <!-- Translating -->
    <script>window.i18n = new (require('../translations/i18n'));</script>

</head>

<div id="popupBox">
    <div id="popup">
        <p>Please wait, necessary files are being downloaded</p>
        <svg id="popupSvg" version="1.1" id="L4" xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100"
            enable-background="new 0 0 0 0" xml:space="preserve">
            <circle fill="rgb(84, 171, 222)" stroke="none" cx="6" cy="50" r="6">
                <animate attributeName="opacity" dur="1s" values="0;1;0" repeatCount="indefinite" begin="0.1" />
            </circle>
            <circle fill="rgb(84, 171, 222)" stroke="none" cx="26" cy="50" r="6">
                <animate attributeName="opacity" dur="1s" values="0;1;0" repeatCount="indefinite" begin="0.2" />
            </circle>
            <circle fill="rgb(84, 171, 222)" stroke="none" cx="46" cy="50" r="6">
                <animate attributeName="opacity" dur="1s" values="0;1;0" repeatCount="indefinite" begin="0.3" />
            </circle>
        </svg>
    </div>
</div>

<div id="popupBoxMac">
    <div id="popupMac">
        <p id="popupMacTxt">You need to download yt-dlp from homebrew first</p>

        <div style="display: flex;">
            <a class="blueBtn" id="openHomebrew" target="_blank" href="https://formulae.brew.sh/formula/yt-dlp">Open
                Homebrew</a>

            <button class="advancedToggle" onclick="quitApp()">Close App</button>

        </div>


    </div>
</div>

<!-- Popup message -->
<span id="popupText">Text copied</span>

<body>

    <!-- Menu icon -->
    <img src="../assets/images/menu.png" alt="menu" id="menuIcon">

    <!-- Menu -->
    <div id="menu">
        <a id="playlistWin" class="menuItem">Download Playlist</a>
        <!-- <a id="newPlaylistWin" class="menuItem">New Playlist</a> -->
        <a id="preferenceWin" class="menuItem">Preferences</a>
        <a id="compressorWin" class="menuItem">Compressor</a>
        <a id="aboutWin" class="menuItem">About</a>
        <span id="themeTxt" class="menuItem">Theme:</span>
        <select name="themeToggle" id="themeToggle">
            <option id="lightTxt" value="light">Light</option>
            <option id="darkTxt" value="dark">Dark</option>
            <option id="frappeTxt" value="frappe">Frappé</option>
            <option id="onedarkTxt" value="onedark">One dark</option>
            <option id="matrixTxt" value="matrix">Matrix</option>
            <option id="githubTxt" value="github">Github</option>
            <option id="latteTxt" value="latte">Latte</option>
            <option id="solarizedDarkTxt" value="solarized-dark">Solarized Dark</option>
        </select>
        <!-- TODO: Add a window which makes it easier to copy logs -->
    </div>

    <button id="pasteUrl" class="submitBtn">Click to paste video URL or ID [Ctrl + V]</button>

    <div id="loadingWrapper">
        <span id="processing">Loading </span>
        <svg version="1.1" id="L4" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
            y="0px" viewBox="0 0 100 100" enable-background="new 0 0 0 0" xml:space="preserve">
            <circle fill="rgb(84, 171, 222)" stroke="none" cx="6" cy="50" r="6">
                <animate attributeName="opacity" dur="1s" values="0;1;0" repeatCount="indefinite" begin="0.1" />
            </circle>
            <circle fill="rgb(84, 171, 222)" stroke="none" cx="26" cy="50" r="6">
                <animate attributeName="opacity" dur="1s" values="0;1;0" repeatCount="indefinite" begin="0.2" />
            </circle>
            <circle fill="rgb(84, 171, 222)" stroke="none" cx="46" cy="50" r="6">
                <animate attributeName="opacity" dur="1s" values="0;1;0" repeatCount="indefinite" begin="0.3" />
            </circle>
        </svg>
    </div>
    <p id="incorrectMsg"></p>
    <button class="advancedToggle" id="errorBtn" onclick="toggleErrorDetails()">Error Details ▼</button>
    <div id="errorDetails" onclick="copyErrorToClipboard()"></div>
    <br>

    <div id="hidden">
        <img src="../assets/images/close.png" alt="close" id="closeHidden">
        <div id="btnContainer">
            <button class="toggleBtn" id="videoToggle">Video</button>
            <button class="toggleBtn" id="audioToggle">Audio</button>
        </div>
        <p id="title">Title </p>

        <div class="videoAudioContainer">
            <!-- Video tab -->
            <div id="videoList">
                <div class="separationBox">
                    <h2 id="videoHeader">Video</h2>
                    <label class="formatSelect">Select Format </label>
                    <select id="videoFormatSelect" class="select">
                    </select>
                    <br>
                    <input type="hidden" name="url" class="url" id="url">

                    <!-- Audio options for video -->
                    <div id="audioForVideo">
                        <h2 id="audioHeader">Audio</h2>
                        <label class="formatSelect">Select Audio Format </label>
                        <select id="audioForVideoFormatSelect" class="select">
                        </select>
                        <br>
                        <input type="hidden" name="url" class="url">
                    </div>
                    <br>
                </div>


                <br>
                <button class="submitBtn" id="videoDownload">Download</button>
                <button id="advancedVideoToggle" class="blueBtn" onClick="advancedToggle()">More options</button>
            </div>

            <!-- Audio tab -->
            <div id="audioList">
                <div id="audioPresent">
                    <label class="formatSelect">Select Format </label>
                    <select id="audioFormatSelect" class="select">
                    </select>
                    <br>
                    <input type="hidden" name="url" class="url">
                    <button class="submitBtn" id="audioDownload">Download</button>
                    <button id="advancedAudioToggle" class="blueBtn" onClick="advancedToggle()">More options</button>
                </div>
            </div>
        </div>

        <div id="advanced">
            <!-- <div class="advancedItem">
                <p>Custom yt-dlp arguments</p>
                <input type="text" id="argInput">
            </div> -->
            <div class="advancedItem">
                <span id="quitTxt">Close app when download finishes</span>
                <input type="checkbox" id="quitChecked" class="cb">
            </div>

            <div class="advancedItem">
                <strong id="rangeText" title="DASH Webm not supported">Download particular time-range</strong>
                <br><br>
                <label id="start">Start</label>
                <input type="text" id="startTime" class="time" placeholder="00:00"
                    title="If kept empty, it will start from the beginning">
                :
                <input type="text" id="endTime" class="time" placeholder="10:00"
                    title="If kept empty, it will be downloaded to the end">
                <label id="end">End</label>
            </div>


            <div class="advancedItem">
                <div><span id="clText">Current download location - </span><span id="path"></span></div>
                <br>
                <button id="selectLocation" class="submitBtn">Select Download Location</button>
            </div>

            <div class="advancedItem">
                <p id="subHeader">Subtitles</p>
                <span id="subTxt">Download subtitles if available</span>
                <input id="subChecked" class="cb" type="checkbox">
            </div>

        </div>

        <!-- Extraction options start -->
        <div id="audioExtract">
            <h2 id="extractHeader">Extract Audio</h2>
            <div>
                <div>
                    <label class="formatSelect">Select Format </label>
                    <select id="extractSelection" class="select audioSelect">
                        <option value="mp3">Mp3</option>
                        <option value="m4a">M4a</option>
                        <option value="opus">Opus</option>
                        <option value="wav">Wav</option>
                        <option value="alac">Alac</option>
                        <option value="flac">Flac</option>
                        <option value="vorbis">Vorbis (ogg)</option>
                    </select>
                </div>

                <div>
                    <label class="extractQualitySelect" id="extractQualitySelectTxt">Select Quality</label>
                    <select id="extractQualitySelect" class="select audioSelect">
                        <option id="extractQualityNormal" value="5">Normal</option>
                        <option id="extractQualityBest" value="0">Best</option>
                        <option id="extractQualityGood" value="2">Good</option>
                        <option id="extractQualityBad" value="8">Bad</option>
                        <option id="extractQualityWorst" value="10">Worst</option>
                    </select>
                </div>
            </div>


            <br>
            <button id="extractBtn">Extract</button>
        </div>

        <!-- Extraction options end -->

    </div>
    <!-- Downloads list -->
    <div id="list"></div>

    <!-- TODO: add translations -->
    <button class="blueBtn" id="clearBtn">Clear Downloads</button>

    <div id="goToTop"></div>

    <script>
        require("../src/translate_index")
    </script>

</body>

</html>